<template>
    <div class="navbottom">
    <van-tabbar route>
        <van-tabbar-item to="/index">
            <template #icon="props">
              <img :src="props.active?home.active:home.inactive" alt="">
            </template>
            <span>首页</span>
        </van-tabbar-item>
    <van-tabbar-item to="/course">
        <template #icon="props">
            <img :src="props.active?course.active:course.inactive" alt="">
        </template>
        <span>课程</span>
    </van-tabbar-item>
    <van-tabbar-item to="/record">
        <template #icon="props">
            <img :src="props.active?record.active:record.inactive" alt="">
        </template>
        <span>约课记录</span>
    </van-tabbar-item>
    <van-tabbar-item to="/practice">
        <template #icon="props">
            <img :src="props.active?practice.active:practice.inactive" alt="">
        </template>
        <span>练习</span>
    </van-tabbar-item>
    <van-tabbar-item to="/userindex">
        <template #icon="props">
            <img :src="props.active?user.active:user.inactive" alt="">
        </template>
        <span>我的</span>
    </van-tabbar-item>
    </van-tabbar>
    </div>
</template>

<script>
export default {
    props: [],
    data() {
        return {
            active:0,
            home:{
                active:require("@/assets/theme-img/home-active.png"),
                inactive:require("@/assets/theme-img/home.png")
            },
            course: {
                active: require("@/assets/theme-img/course-active.png"),
                inactive: require("@/assets/theme-img/course.png")
            },
            record: {
                active: require("@/assets/theme-img/study-active.png"),
                inactive: require("@/assets/theme-img/study.png")
            },
            practice: {
                active: require("@/assets/theme-img/study-active.png"),
                inactive: require("@/assets/theme-img/study.png")
            },
            user: {
                active: require("@/assets/theme-img/user-active.png"),
                inactive: require("@/assets/theme-img/user.png")
            },
        }
    },
    methods: {

    }
}
</script>

<style lang="scss">
</style>
